<template>
	<view class="load-more-top">
		<text v-if="loadingType === 'loading'" class="end-text">正在加载...</text>
		<text v-else-if="loadingType === 'end'" class="end-text">— 我是有底线的 —</text>
		<text v-else-if="loadingType === 'error'" class="error-text" @click="loadMore">︾ 加载失败，点击重试 ︾</text>
		<view v-else class="place-holder"></view>
		<view  class="place-holder">京ICP备2025126395号-1</view>
	</view>
</template>

<script>
export default {
	name: 'load-more',
	props: {
		currentLength: {
			// 当前已加载数量
			type: Number,
			default: 10
		},
		total: {
			// 数据总数
			type: Number,
			default: 0
		},
		pageSize: {
			// 每页加载数量
			type: Number,
			default: 10
		}
	},
	data() {
		return {
			loadingType: 'more',
			isLoading: false
		};
	},
	methods: {
		async loadMore() {
			// if (this.isLoading || this.loadingType === 'end') return;
			this.isLoading = true;
			this.loadingType = 'loading';
			try {
				// 触发加载数据事件
				await this.$emit('load-list');
				const remaining = this.total - this.currentLength;

				// // 自动加载判断：剩余数量小于等于pageSize时预加载
				// if (remaining > 0 && remaining <= this.pageSize) {
				// 	await this.$emit('load-add');
				// 	await this.$emit('load-list');
				// }

				// 更新加载状态
				this.loadingType = this.currentLength >= this.total ? 'end' : 'more';
			} catch (e) {
				this.loadingType = 'error';
				console.error('加载失败:', e);
			} finally {
				this.isLoading = false;
			}
		}
	},
	watch: {
		currentLength(newVal) {
			if (newVal >= this.total) {
				this.loadingType = 'end';
			}
		}
	}
};
</script>

<style lang="scss" scoped>
.load-more-top {
	padding: 20px 0;
	text-align: center;
	color: #999;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;

	.end-text {
		display: inline-block;
		position: relative;
		padding: 0 20px;

		&::before,
		&::after {
			content: '';
			position: absolute;
			top: 50%;
			width: 60px;
			height: 1px;
			background: #ddd;
		}

		&::before {
			left: -70px;
		}

		&::after {
			right: -70px;
		}
	}

	.error-text {
		color: #ff5000;
		cursor: pointer;
	}

	.place-holder {
		height: 1px;
	}
}
</style>
